import Image from "next/image"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import { Sparkles } from "lucide-react"
import GoldCoinIcon from "../components/gold-coinIcon"
import SilverCoinIcon from "../components/silver-coinIcon"
import BronzeCoinIcon from "../components/bronze-coinIcon"
import BinaryCodeTransition from "@/components/BinaryCodeTransition"

export default function Home() {
  const partners = Array(43).fill("Adot")

  return (
    <main className="min-h-screen bg-dark-blue relative">
      <div className="fixed inset-0 z-0">
        <div className="absolute inset-0 bg-dark-blue opacity-80 z-10"></div>
        <Image src="/images/background.jpeg" alt="Background" fill className="object-cover opacity-40 z-0" priority />
      </div>

      <div className="relative z-10">
        <Navbar />

        <section className="relative pt-20 py-10 mt-4">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="mx-auto max-w-7xl">
              <div className="relative overflow-hidden rounded-xl">
                <div className="relative w-full h-[400px] md:h-[500px] shadow-2xl bg-gradient-to-l from-dark-blue to-transparent">
                  <Image
                    src="/images/section-1.png"
                    alt="Beraroot workspace"
                    fill
                    className="object-cover object-center"
                    priority
                  />

                  <div className="absolute inset-0 flex items-center">
                    <div className="px-6 md:px-12 lg:px-16">
                      <div className="max-w-lg">
                        <div className="mb-6">
                          <Image
                            src="/images/smiling-face.png"
                            alt="Smiling Face"
                            width={80}
                            height={80}
                            className="w-20 h-20"
                          />
                        </div>
                        <h1 className="text-5xl font-bold tracking-tight bg-gradient-to-r from-blue-600 to-bera-yellow bg-clip-text text-transparent sm:text-5xl md:text-6xl mb-6">
                          Beraroot
                        </h1>
                        <p className="text-2xl font-medium text-white">
                          The first Data Data Availability and MEV services of Berachain
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <BinaryCodeTransition />

        <section className="py-10">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="mx-auto max-w-7xl">
              <div className="relative overflow-hidden rounded-xl shadow-2xl">
                <div className="absolute inset-0 z-0">
                  <div className="absolute inset-0 w-full h-full">
                    <Image
                      src="/images/section-2.png"
                      alt="Beraroot Bear Developer"
                      fill
                      className="object-contain object-right-top md:object-right"
                    />
                  </div>
                  <div className="absolute inset-0 bg-gradient-to-l from-transparent via-dark-blue/70 to-dark-blue/90"></div>
                </div>

                <div className="relative z-10 p-8 md:p-12 lg:p-16">
                  <div className="max-w-lg">
                    <div className="flex items-center mb-8">
                    <h1 className="text-5xl font-bold tracking-tight bg-gradient-to-l from-blue-600 to-bera-yellow bg-clip-text text-transparent sm:text-5xl md:text-6xl mb-6">
                        WHAT IS
                        <br />
                        BERAROOT
                      </h1>

                      <div className="w-16 h-16 md:w-24 md:h-24 animate-float mt-4">
                        <Image
                          src="/images/leaf.png"
                          alt="Beraroot Leaf"
                          width={100}
                          height={100}
                          className="w-full h-full object-contain"
                        />
                      </div>

                    </div>
                    <div className="mb-4">
                      <h3 className="text-2xl font-bold text-bera-yellow mb-2">Beraroot</h3>
                      <p className="text-gray-200 text-lg">
                        introduces an innovative blockchain ecosystem solution designed to enhance the transaction
                        efficiency, security, and transparency of Berachain its users through the integration of Miner
                        Extractable Value <span className="text-bera-yellow">(MEV)</span> optimization and Data
                        Availability <span className="text-bera-yellow">(DA)</span> technologies.
                      </p>
                    </div>
                  </div>
                  <div className="absolute top-[30%] right-[45%] w-4 h-4 bg-white rotate-45"></div>
                  <div className="absolute top-[25%] right-[40%] w-6 h-6 bg-bera-yellow rotate-45"></div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="py-10">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="mx-auto max-w-7xl">
              <div className="relative overflow-hidden rounded-xl min-h-[600px]">
                <div className="absolute inset-0 z-0 overflow-hidden">
                  <div className="absolute inset-0 w-full h-full">
                    <Image
                      src="/images/section-3.png"
                      alt="Beraroot Bear with Server"
                      fill
                      className="object-contain object-left-top"
                      style={{ objectPosition: "0% 0%" }}
                      priority
                    />
                  </div>
                  <div className="absolute inset-0 bg-gradient-to-r from-transparent via-dark-blue/70 to-dark-blue/90"></div>
                </div>

                <div className="absolute inset-0 overflow-hidden pointer-events-none z-10">
                  <div className="coin coin-1 absolute w-10 h-10">
                    <GoldCoinIcon className="w-10 h-10 text-yellow-500" />
                  </div>
                  <div className="coin coin-2 absolute w-9 h-9">
                    <SilverCoinIcon className="w-9 h-9" />
                  </div>
                  <div className="coin coin-3 absolute w-8 h-8">
                    <BronzeCoinIcon className="w-8 h-8" />
                  </div>
                  <div className="coin coin-4 absolute w-10 h-10">
                    <GoldCoinIcon className="w-10 h-10 text-yellow-500" />
                  </div>
                  <div className="coin coin-5 absolute w-8 h-8">
                    <BronzeCoinIcon className="w-8 h-8" />
                  </div>
                  <div className="coin coin-6 absolute w-9 h-9">
                    <SilverCoinIcon className="w-9 h-9" />
                  </div>
                </div>

                <div className="relative z-20 p-8 md:p-12 lg:p-16 flex flex-col items-end">
                  <div className="w-full md:w-3/5 ml-auto">
                    <div className="flex items-center justify-end mb-12">
                      <Sparkles className="text-white mr-3 h-6 w-6" />
                      <h1 className="text-5xl font-bold tracking-tight bg-gradient-to-r from-blue-800 to-bera-yellow bg-clip-text text-transparent sm:text-5xl md:text-6xl mb-6">
                        DATA AVAILABILITY
                        <br />
                        <span className="text-bera-yellow">(DA)</span> SERVICES
                      </h1>
                    </div>

                    <div className="space-y-12 relative">
                      <div className="absolute left-0 top-[90px] w-[20%] h-[1px] bg-gray-600 transform -rotate-12 hidden md:block"></div>
                      <div className="absolute left-0 top-[230px] w-[20%] h-[1px] bg-gray-600 transform -rotate-12 hidden md:block"></div>

                      <div className="bg-teal-50/10 backdrop-blur-sm rounded-lg p-6 border border-teal-200/20 ml-auto">
                        <p className="text-white text-lg">
                          By integrating Data Availability Layer technologies, such as Data Availability Sampling{" "}
                          <span className="text-bera-yellow">(DAS)</span> and Kate commitments{" "}
                          <span className="text-bera-yellow">(KZG commitments)</span>
                        </p>
                      </div>

                      <div className="bg-teal-50/10 backdrop-blur-sm rounded-lg p-6 border border-teal-200/20 ml-auto">
                        <p className="text-white text-lg">
                          Beraroot strengthens the immediate broadcast and persistent storage of transaction data,
                          ensuring data reliability and traceability
                        </p>
                      </div>
                      <div className="bg-teal-50/10 backdrop-blur-sm rounded-lg p-6 border border-teal-200/20 ml-auto">
                        <p className="text-white text-lg">
                          The network offers additional censorship resistance and high fault tolerance, thus enhancing
                          overall transparency and security.
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="py-10">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="mx-auto max-w-7xl">
              <div className="relative overflow-hidden rounded-xl shadow-2xl">
                <div className="absolute inset-0 z-0 overflow-hidden">
                  <div className="absolute inset-0 w-full h-full">
                    <Image
                      src="/images/optimization.png"
                      alt="Beraroot MEV Optimization"
                      fill
                      className="object-contain object-right-top"
                      style={{ objectPosition: "100% 0%" }}
                      priority
                    />
                  </div>
                  <div className="absolute inset-0 bg-gradient-to-l from-transparent via-dark-blue/70 to-dark-blue/90"></div>
                </div>

                <div className="relative z-10 p-8 md:p-12 lg:p-16">
                  <div className="w-full md:w-1/2">

                    <div className="flex items-center gap-2 mb-4">
                      <div className="w-8 h-8 bg-bera-yellow"></div>
                      <div className="w-8 h-8 bg-white"></div>
                    </div>


                    <h1 className="text-5xl font-bold tracking-tight bg-gradient-to-l from-blue-800 to-bera-yellow bg-clip-text text-transparent sm:text-5xl md:text-6xl mb-6">MEV OPTIMIZATION</h1>

                  
                    <div className="space-y-8">
                      <p className="text-white text-lg">
                        Beraroot introduces open Remote Procedure Call (RPC) services and auction mechanisms, mobilizing
                        users within the Berachain ecosystem to discover and leverage MEV opportunities.
                      </p>

                      <p className="text-white text-lg">
                        This strategy ensures transaction fairness and transparency, preventing misconduct like
                        front-running and transaction piggybacking.
                      </p>

                      <p className="text-white text-lg">
                        Through the auction mechanism, Beraroot establishes a fair trading scene, providing equal
                        opportunities for all participants. These optimization and safeguard measures help eliminate
                        unfair trading practices, enhancing transaction fairness and credibility.
                      </p>
                    </div>

                   
                    <div className="mt-12">
                      <Sparkles className="text-white h-6 w-6" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

  
        <section className="py-10 relative mb-10">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div className="mx-auto max-w-7xl">
           
              <div className="flex items-center mb-16">
                <h1 className="text-5xl font-bold tracking-tight bg-gradient-to-r from-blue-800 to-bera-yellow bg-clip-text text-transparent sm:text-5xl md:text-6xl mb-6">PARTNERS</h1>
              </div>

              <div
                className="space-y-6 relative rounded-xl overflow-hidden py-10 px-8 min-h-[520px] flex flex-col justify-around bg-slate-800 bg-opacity-80"
                style={{
                  backgroundImage: `url('/images/bg.png')`,
                  backgroundPosition: "0% 100%",
                  backgroundRepeat: "no-repeat",
                  backgroundSize: "cover",
                }}
              >
              
                <div className="partners-row-right overflow-hidden w-full">
                  <div className="flex animate-scroll-right">
                    {[
                      "Adot.png", "areB.jpg", "AZEx.jpg", "B Side.jpg", "bakeland.jpg", 
                      "Bear Arena.jpg", "BearCage.jpg", "Beta Pong.jpg", "beta puppets.jpg",
                      "Berabonk.png", "Beracana.jpg", "Beraj.jpg", "Bertaland.jpg"
                    ].map((partner, index) => (
                      <div
                        key={`row1-${index}`}
                        className="flex-shrink-0 mx-2 bg-dark-blue-lighter/70 backdrop-blur-sm rounded-lg p-3 w-[280px] flex items-center"
                      >
                        <div className="w-12 h-12 rounded-full overflow-hidden flex-shrink-0 mr-4">
                          <Image
                            src={`/images/partners/${partner}`}
                            alt={partner.replace('.png', '').replace('.jpg', '')}
                            width={48}
                            height={48}
                            className="w-full h-full object-cover"
                          />
                        </div>
                        <span className="text-white font-medium">
                          {partner.replace('.png', '').replace('.jpg', '')}
                        </span>
                      </div>
                    ))}
                    
                    {[
                      "Adot.png", "are8.jpg", "AZC.jpg", "B Side.jpg", "bakeland.jpg", 
                      "Bear Arena.jpg", "BearCage.jpg", "Beta Pong.jpg", "beta puppets.jpg",
                      "Berabonk.png", "Beracana.jpg", "Beraj.jpg", "Bertaland.jpg"
                    ].map((partner, index) => (
                      <div
                        key={`row1-dup-${index}`}
                        className="flex-shrink-0 mx-2 bg-dark-blue-lighter/40 backdrop-blur-sm rounded-lg p-3 w-[280px] flex items-center"
                      >
                        <div className="w-12 h-12 rounded-full overflow-hidden flex-shrink-0 mr-4">
                          <Image
                            src={`/images/partners/${partner}`}
                            alt={partner.replace('.png', '').replace('.jpg', '')}
                            width={48}
                            height={48}
                            className="w-full h-full object-cover"
                          />
                        </div>
                        <span className="text-white font-medium">
                          {partner.replace('.png', '').replace('.jpg', '')}
                        </span>
                      </div>
                    ))}
                  </div>
                </div>

                
                <div className="partners-row-left overflow-hidden w-full">
                  <div className="flex animate-scroll-left">
                    {[
                      "BerarPoker.jpg", "BeraSig.png", "BeraTone.jpg", "BeraVote.jpg", 
                      "BmBn.jpg", "Bullas.jpg", "DNI.jpg", "Fable Platform.jpg", 
                      "ForestBeat.jpg", "FROMO.jpg", "Grizzly Launchpad.jpg", 
                      "HoneyPotFinance.png", "Impakti.jpg"
                    ].map((partner, index) => (
                      <div
                        key={`row2-${index}`}
                        className="flex-shrink-0 mx-2 bg-dark-blue-lighter/70 backdrop-blur-sm rounded-lg p-3 w-[280px] flex items-center"
                      >
                        <div className="w-12 h-12 rounded-full overflow-hidden flex-shrink-0 mr-4">
                          <Image
                            src={`/images/partners/${partner}`}
                            alt={partner.replace('.png', '').replace('.jpg', '')}
                            width={48}
                            height={48}
                            className="w-full h-full object-cover"
                          />
                        </div>
                        <span className="text-white font-medium">
                          {partner.replace('.png', '').replace('.jpg', '')}
                        </span>
                      </div>
                    ))}
                 
                    {[
                      "BerarPoker.jpg", "BeraSig.png", "BeraTone.jpg", "BeraVote.jpg", 
                      "BrnBin.jpg", "Bullas.jpg", "DNI.jpg", "Fable Platform.jpg", 
                      "ForestBeat.jpg", "FROMO.jpg", "Grizzly Launchpad.jpg", 
                      "HoneyPotFinance.png", "Impakti.jpg"
                    ].map((partner, index) => (
                      <div
                        key={`row2-dup-${index}`}
                        className="flex-shrink-0 mx-2 bg-dark-blue-lighter/40 backdrop-blur-sm rounded-lg p-3 w-[280px] flex items-center"
                      >
                        <div className="w-12 h-12 rounded-full overflow-hidden flex-shrink-0 mr-4">
                          <Image
                            src={`/images/partners/${partner}`}
                            alt={partner.replace('.png', '').replace('.jpg', '')}
                            width={48}
                            height={48}
                            className="w-full h-full object-cover"
                          />
                        </div>
                        <span className="text-white font-medium">
                          {partner.replace('.png', '').replace('.jpg', '')}
                        </span>
                      </div>
                    ))}
                  </div>
                </div>

                
                <div className="partners-row-right overflow-hidden w-full">
                  <div className="flex animate-scroll-right">
                    {[
                      "IVX.png", "Kingdomly.jpg", "Kumamon.png", "Madhoney.jpg", 
                      "Mantis Swap.jpg", "Moniswap.jpg", "Narra.jpg", "Onikuma.png", 
                      "OPERKATE.png", "Teddy, Berai.jpg", "Terplayer.jpg", "Tierra.jpg", 
                      "Wagmipad.jpg"
                    ].map((partner, index) => (
                      <div
                        key={`row3-${index}`}
                        className="flex-shrink-0 mx-2 bg-dark-blue-lighter/70 backdrop-blur-sm rounded-lg p-3 w-[280px] flex items-center"
                      >
                        <div className="w-12 h-12 rounded-full overflow-hidden flex-shrink-0 mr-4">
                          <Image
                            src={`/images/partners/${partner}`}
                            alt={partner.replace('.png', '').replace('.jpg', '')}
                            width={48}
                            height={48}
                            className="w-full h-full object-cover"
                          />
                        </div>
                        <span className="text-white font-medium">
                          {partner.replace('.png', '').replace('.jpg', '')}
                        </span>
                      </div>
                    ))}
                   
                    {[
                      "IVX.png", "KingdomMy.jpg", "Kumamon.png", "Madhoney.jpg", 
                      "Mantis Swap.jpg", "Moniswap.jpg", "Narra.jpg", "Onikuma.png", 
                      "OPERKATE.png", "Teddy, Berai.jpg", "Terplayer.jpg", "Tierra.jpg", 
                      "Wagmipad.jpg"
                    ].map((partner, index) => (
                      <div
                        key={`row3-dup-${index}`}
                        className="flex-shrink-0 mx-2 bg-dark-blue-lighter/40 backdrop-blur-sm rounded-lg p-3 w-[280px] flex items-center"
                      >
                        <div className="w-12 h-12 rounded-full overflow-hidden flex-shrink-0 mr-4">
                          <Image
                            src={`/images/partners/${partner}`}
                            alt={partner.replace('.png', '').replace('.jpg', '')}
                            width={48}
                            height={48}
                            className="w-full h-full object-cover"
                          />
                        </div>
                        <span className="text-white font-medium">
                          {partner.replace('.png', '').replace('.jpg', '')}
                        </span>
                      </div>
                    ))}
                  </div>
                </div>

                
                <div className="partners-row-left overflow-hidden w-full">
                  <div className="flex animate-scroll-left">
                    {[
                      "WeBera Finance.jpg", "Wizzwoods.jpg", "ZNSHoney.png", "Zoo Finance.jpg"
                    ].map((partner, index) => (
                      <div
                        key={`row4-${index}`}
                        className="flex-shrink-0 mx-2 bg-dark-blue-lighter/70 backdrop-blur-sm rounded-lg p-3 w-[280px] flex items-center"
                      >
                        <div className="w-12 h-12 rounded-full overflow-hidden flex-shrink-0 mr-4">
                          <Image
                            src={`/images/partners/${partner}`}
                            alt={partner.replace('.png', '').replace('.jpg', '')}
                            width={48}
                            height={48}
                            className="w-full h-full object-cover"
                          />
                        </div>
                        <span className="text-white font-medium">
                          {partner.replace('.png', '').replace('.jpg', '')}
                        </span>
                      </div>
                    ))}
                  
                    {[
                      "WeBera Finance.jpg", "Wizzwoods.jpg", "ZNSHoney.png", "Zoo Finance.jpg"
                    ].map((partner, index) => (
                      <div
                        key={`row4-dup-${index}`}
                        className="flex-shrink-0 mx-2 bg-dark-blue-lighter/40 backdrop-blur-sm rounded-lg p-3 w-[280px] flex items-center"
                      >
                        <div className="w-12 h-12 rounded-full overflow-hidden flex-shrink-0 mr-4">
                          <Image
                            src={`/images/partners/${partner}`}
                            alt={partner.replace('.png', '').replace('.jpg', '')}
                            width={48}
                            height={48}
                            className="w-full h-full object-cover"
                          />
                        </div>
                        <span className="text-white font-medium">
                          {partner.replace('.png', '').replace('.jpg', '')}
                        </span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <Footer />
      </div>
    </main>
  )
}